<script setup lang="ts">
import { ref, computed } from 'vue'
import { Calendar, Collection, Star, Timer } from '@element-plus/icons-vue'

interface TimelineItem {
  id: number
  type: 'diary' | 'goal' | 'milestone'
  date: string
  title: string
  content: string
  mood?: string
  tags?: string[]
  progress?: number
  status?: 'completed' | 'in_progress' | 'pending'
}

const activeFilter = ref('all')
const timelineItems = ref<TimelineItem[]>([
  {
    id: 1,
    type: 'diary',
    date: '2024-03-13',
    title: '项目启动',
    content: '今天完成了项目的前期规划，感觉很有成就感...',
    mood: 'excited',
    tags: ['工作', '项目'],
  },
  {
    id: 2,
    type: 'goal',
    date: '2024-03-12',
    title: '学习新技能',
    content: '计划在一个月内掌握Vue3和TypeScript...',
    progress: 60,
    status: 'in_progress',
  },
  {
    id: 3,
    type: 'milestone',
    date: '2024-03-10',
    title: '第一个里程碑',
    content: '完成了基础框架的搭建',
    status: 'completed',
  },
])

const filters = [
  { label: '全部', value: 'all', icon: Collection },
  { label: '日记', value: 'diary', icon: Calendar },
  { label: '目标', value: 'goal', icon: Star },
  { label: '里程碑', value: 'milestone', icon: Timer },
]

const filteredItems = computed(() => {
  if (activeFilter.value === 'all') return timelineItems.value
  return timelineItems.value.filter((item) => item.type === activeFilter.value)
})

const getMoodIcon = (mood: string) => {
  const moodIcons: Record<string, string> = {
    happy: '😊',
    calm: '😌',
    thinking: '🤔',
    tired: '😫',
    excited: '🤩',
  }
  return moodIcons[mood] || '😊'
}

const getStatusColor = (status?: string) => {
  const statusColors: Record<string, string> = {
    completed: 'var(--laser-cyan)',
    in_progress: 'var(--supernova-orange)',
    pending: 'var(--hologram-purple)',
  }
  return statusColors[status || 'pending'] || 'var(--text-secondary)'
}
</script>

<template>
  <div class="timeline-container">
    <el-card class="filter-card">
      <div class="filter-group">
        <el-radio-group v-model="activeFilter" class="filter-buttons">
          <el-radio-button
            v-for="filter in filters"
            :key="filter.value"
            :label="filter.value"
            class="filter-button"
          >
            <el-icon><component :is="filter.icon" /></el-icon>
            <span>{{ filter.label }}</span>
          </el-radio-button>
        </el-radio-group>
      </div>
    </el-card>

    <div class="timeline">
      <div v-for="item in filteredItems" :key="item.id" class="timeline-item" :class="item.type">
        <div class="timeline-content">
          <div class="timeline-header">
            <div class="timeline-date">{{ item.date }}</div>
            <div class="timeline-type">
              <el-tag
                :type="
                  item.type === 'diary' ? 'success' : item.type === 'goal' ? 'warning' : 'info'
                "
              >
                {{ item.type === 'diary' ? '日记' : item.type === 'goal' ? '目标' : '里程碑' }}
              </el-tag>
            </div>
          </div>

          <div class="timeline-title">{{ item.title }}</div>
          <div class="timeline-body">{{ item.content }}</div>

          <div class="timeline-footer">
            <div v-if="item.mood" class="mood">
              <span class="mood-icon">{{ getMoodIcon(item.mood) }}</span>
            </div>
            <div v-if="item.tags" class="tags">
              <el-tag v-for="tag in item.tags" :key="tag" size="small" class="tag">
                {{ tag }}
              </el-tag>
            </div>
            <div v-if="item.progress !== undefined" class="progress">
              <el-progress
                :percentage="item.progress"
                :color="getStatusColor(item.status)"
                :show-text="false"
                :stroke-width="4"
                class="progress-bar"
              />
            </div>
            <div v-if="item.status" class="status">
              <el-tag
                :type="
                  item.status === 'completed'
                    ? 'success'
                    : item.status === 'in_progress'
                      ? 'warning'
                      : 'info'
                "
                size="small"
              >
                {{
                  item.status === 'completed'
                    ? '已完成'
                    : item.status === 'in_progress'
                      ? '进行中'
                      : '待开始'
                }}
              </el-tag>
            </div>
          </div>
        </div>

        <div class="timeline-dot" :style="{ backgroundColor: getStatusColor(item.status) }" />
        <div class="timeline-line" :style="{ backgroundColor: getStatusColor(item.status) }" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.timeline-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.filter-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
  margin-bottom: 30px;
}

.filter-group {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.filter-buttons {
  display: flex;
  gap: 10px;
}

.filter-button {
  :deep(.el-radio-button__inner) {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);

    &:hover {
      background: rgba(0, 255, 209, 0.1);
    }
  }

  :deep(.is-active .el-radio-button__inner) {
    background: var(--laser-cyan);
    border-color: var(--laser-cyan);
    color: var(--quantum-blue);
  }
}

.timeline {
  position: relative;
  padding-left: 30px;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
  }
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 30px;

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;

    .timeline-line {
      display: none;
    }
  }
}

.timeline-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-shadow);
  }
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.timeline-date {
  color: var(--text-secondary);
  font-size: 14px;
}

.timeline-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.timeline-body {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 15px;
}

.timeline-footer {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.mood {
  .mood-icon {
    font-size: 20px;
  }
}

.tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.tag {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.progress {
  flex: 1;
  min-width: 100px;
}

.progress-bar {
  :deep(.el-progress-bar__outer) {
    background: var(--bg-secondary);
  }
}

.timeline-dot {
  position: absolute;
  left: -34px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
  color: inherit;
}

.timeline-line {
  position: absolute;
  left: -30px;
  top: 30px;
  bottom: 0;
  width: 2px;
  opacity: 0.5;
}

:deep(.el-tag) {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);

  &.el-tag--success {
    background: rgba(0, 255, 209, 0.1);
    border-color: var(--laser-cyan);
    color: var(--laser-cyan);
  }

  &.el-tag--warning {
    background: rgba(255, 95, 31, 0.1);
    border-color: var(--supernova-orange);
    color: var(--supernova-orange);
  }

  &.el-tag--info {
    background: rgba(102, 51, 255, 0.1);
    border-color: var(--hologram-purple);
    color: var(--hologram-purple);
  }
}
</style>
